<template>
  <!-- 预约点餐 -->
  <view class="page themeMask">
    <!-- 轮播 -->
    <view class="swiper">
      <uv-swiper :list="list" height="178"></uv-swiper>
    </view>
    <!-- 店铺标题 -->
    <view class="shopTitle themeMask border12 flex alignCenter justifyBetween">
      <view class="flex alignCenter">
        <image
          class="border50 mr14"
          src=""
          style="width: 90rpx; height: 90rpx; background-color: #888"
        ></image>
        <view class="bold fz32"> 店铺名称标题 </view>
      </view>
      <text class="tableNum themeColor pd1020 fff border12">桌号：A01</text>
    </view>
    <!-- 点餐 -->
    <view class="contentBox">
      <uv-tabs :list="listTabs" lineColor="#75301e"></uv-tabs>
      <uv-vtabs chain :list="goodsList" hdHeight="460rpx">
        <template v-for="(item, index) in goodsList" :key="index">
          <uv-vtabs-item :index="index">
            <view class="item-title mb10">
              <text class="text">{{ item.name }}</text>
            </view>
            <view class="item" v-for="(itm, idx) in item.childrens" :key="idx">
              <view class="item-content flex">
                <view class="mr14">
                  <image class="imageBig border12 themeColor" src=""></image>
                </view>
                <view class="flexColumn" style="width: 100%">
                  <text class="text bold mt16">{{ itm.name }}</text>
                  <view class="flex justifyBetween mt20">
                    <text class="red bold">￥{{ itm.price }}</text>
                    <!-- 步进器 -->
                    <uv-number-box
                      v-if="itm.type == 1"
                      v-model="itm.num"
                      :showMinus="itm.num > 0"
                      :min="0"
                    >
                      <template v-slot:minus>
                        <view class="minus">
                          <uv-icon name="minus" size="12"> </uv-icon>
                        </view>
                      </template>
                      <template v-slot:input>
                        <text
                          v-if="itm.num > 0"
                          style="width: 50rpx; text-align: center"
                          class="input"
                        >
                          {{ itm.num }}
                        </text>
                      </template>
                      <template v-slot:plus>
                        <view class="plus">
                          <uv-icon name="plus" color="#FFFFFF" size="12">
                          </uv-icon>
                        </view>
                      </template>
                    </uv-number-box>
                    <!-- 选规格 -->
                    <view
                      v-else
                      class="themeColor pd1020 fz20 fff border12"
                      @click="clickPop(itm)"
                    >
                      选规格
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uv-vtabs-item>
        </template>
        <uv-gap bg-color="#fff" height="350"></uv-gap>
      </uv-vtabs>
      <!-- sku弹窗 -->
      <uv-popup
        ref="popupRef"
        round="12"
        :closeOnClickOverlay="false"
        :safeAreaInsetBottom="false"
        mode="center"
      >
        <view class="fz24 popSku" style="width: 670rpx">
          <view class="fz32 bold mb20 pd20">{{ skuInfo.name }}</view>
          <view
            class="flexColumn mb20 pd020"
            v-for="(item, index) in skuInfo.attrs"
            :key="index"
          >
            <text class="mb14">{{ item.name }}</text>
            <view class="flex lightgray">
              <text
                class="borderSoB mr14"
                :class="subIndex[index] == idx ? 'active' : ''"
                @click="choose(itm.name, index, idx)"
                v-for="(itm, idx) in item.item"
                :key="idx"
                >{{ itm.name }}</text
              >
            </view>
          </view>
          <view class="themeBga pd200 mb20" style="padding-left: 20rpx"
            >已选规格：{{ chooseSku.join(" ") }}</view
          >
          <view class="flex justifyBetween alignCenter pd020 mb20">
            <view class="flex alignCenter">
              <text>合计</text>
              <text class="red fz30">￥{{ selecSkuInfo?.price }}</text>
            </view>
            <view class="pd1640 themeColor border12 fff" @click="onAddSkuGoods"
              >添加</view
            >
          </view>
          <!-- 关闭弹窗 -->
          <view class="iconPop" @click="closePop">
            <uv-icon name="close-circle" size="40" color="#888"></uv-icon>
          </view>
        </view>
      </uv-popup>
    </view>
    <!-- 底部 -->
    <view class="bottom flex themeMask justifyBetween">
      <view class="flex alignCenter">
        <image
          class="imageBotm"
          src="/static/images/home/cart.png"
          style="width: 100rpx; height: 100rpx"
          @click="openCart"
        >
        </image>
        <view class="flex alignCenter" style="margin-left: 100rpx">
          <view>合计</view>
          <view>￥{{ orderSum }}</view>
        </view>
      </view>
      <view
        class="anOrder themeColor fff flex alignCenter"
        @click="goUrl('/pages/core/mackOrder/mackOrder')"
      >
        下单
      </view>
    </view>
    <!-- 购物车 -->
    <uv-popup ref="popupCartRef" round="12" mode="bottom">
      <view class="popBox fz24">
        <view class="borderBtm flex justifyBetween">
          <view class="flex alignCenter fz28">
            <view class="flex">
              <view>已点菜品</view>
              <view class="red">（{{ orderStore.bugList.length }}）</view>
            </view>
            <view class="mr14">桌号：A01 |</view>
            <view>4人就餐</view>
          </view>
          <view>清空</view>
        </view>
        <scroll-view class="scrollView" scroll-y>
          <view
            class="popContent flex justifyBetween mb20"
            v-for="(item, index) in orderStore.bugList"
            :key="index"
          >
            <view class="flex alignCenter">
              <image
                class="border12 mr20"
                src=""
                style="width: 120rpx; height: 120rpx; background-color: #888"
              ></image>
              <view class="flexColumn">
                <view class="fz30">{{ item.name }}</view>
                <view class="fz24 darkgray" style="margin: 4rpx 0">{{
                  item.type == "1" ? item.dic : item.skuName
                }}</view>
                <view class="blod red fz30">￥{{ item.price }}</view>
              </view>
            </view>
            <view class="flexColumn alignEnd">
              <view class="mb10">用户昵称</view>
              <!-- 步进器 -->
              <view class="flex">
                <uv-number-box
                  v-model="item.num"
                  :showMinus="item.num > 0"
                  :min="0"
                >
                  <template v-slot:minus>
                    <view class="minus">
                      <uv-icon name="minus" size="12"> </uv-icon>
                    </view>
                  </template>
                  <template v-slot:input>
                    <text
                      v-if="item.num > 0"
                      style="width: 50rpx; text-align: center"
                      class="input"
                    >
                      {{ item.num }}
                    </text>
                  </template>
                  <template v-slot:plus>
                    <view class="plus">
                      <uv-icon name="plus" color="#FFFFFF" size="12"> </uv-icon>
                    </view>
                  </template>
                </uv-number-box>
              </view>
            </view>
          </view>
          <view class="box100"></view>
        </scroll-view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useOrderStore } from "../../../stores";

const orderStore = useOrderStore();

// 轮播数据
const list = [
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
];
// 点餐
const listTabs = [
  {
    id: 1,
    name: "点餐",
  },
  {
    id: 2,
    name: "商家",
  },
];
// 商品列表
const goodsList = ref([
  {
    name: "鲍鱼龙虾",
    childrens: [
      {
        name: "鲍鱼龙虾多规格的",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 1,
        type: 2,
        list: [
          {
            id: "1",
            price: "16",
            stock: "40", //库存
            difference: "冰,无糖",
          },
          {
            id: "2",
            price: "16",
            stock: "50",
            difference: "冰,半份糖",
          },
          {
            id: "3",
            price: "16",
            stock: "60",
            difference: "冰,单份糖",
          },

          {
            id: "4",
            price: "16",
            stock: "70",
            difference: "热,无糖",
          },
          {
            id: "5",
            price: "16",
            stock: "80",
            difference: "热,半份糖",
          },
          {
            id: "6",
            price: "16",
            stock: "90",
            difference: "热,单份糖",
          },
        ],
        attrs: [
          {
            name: "温度",
            item: [{ name: "热" }, { name: "冰" }],
          },
          {
            name: "糖",
            item: [{ name: "无糖" }, { name: "半份糖" }, { name: "单份糖" }],
          },
        ],
      },
      {
        name: "鲍鱼龙虾2",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 2,
        type: 1,
      },
      {
        name: "鲍鱼龙虾3",
        dic: "我很好吃",

        price: 12.8,
        num: 0,
        id: 3,
        type: 1,
      },
      {
        name: "鲍鱼龙虾4",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 4,
        type: 1,
      },
    ],
  },
  {
    name: "主食菜品",
    childrens: [
      {
        name: "大米1",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 5,
        type: 1,
      },
      {
        name: "大米2",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 6,
        type: 1,
      },
    ],
  },
  {
    name: "下酒菜",
    childrens: [
      {
        name: "花生米1",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 7,
        type: 1,
      },
      {
        name: "花生米2",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 8,
        type: 1,
      },
    ],
  },
  {
    name: "新品上市",
    childrens: [
      {
        name: "新品1",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 9,
        type: 1,
      },
      {
        name: "新品2",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 10,
        type: 1,
      },
      {
        name: "新品1",
        dic: "我很好吃",
        price: 12.8,
        num: 0,
        id: 11,
        type: 1,
      },
    ],
  },
]);

// 购物车
watch(
  goodsList,
  (value) => {
    const buyList = ref([]);
    value.forEach((item) => {
      item.childrens.filter((v) => {
        if (v.num > 0) {
          buyList.value.push(v);
        }
      });
    });
    orderStore.setBuyList(buyList.value);
    console.log(orderStore.bugList, "orderStore.bugList");
  },
  { deep: true }
);

// 合计
const orderSum = computed(() => {
  return orderStore.bugList
    .reduce((accumulator, item) => accumulator + item.price * item.num, 0)
    .toFixed(2);
});

// 规格弹窗
const popupRef = ref();
const clickPop = (itm) => {
  skuInfo.value = itm;
  chooseSku.value = [];
  subIndex.value = [];
  selecSkuInfo.value = {};
  changeSkuInfo2();
  popupRef.value.open();
};

const closePop = () => {
  popupRef.value.close();
};

// sku数据
const skuInfo = ref({});

// 对比数据
const skuInfo2 = ref({});
const changeSkuInfo2 = () => {
  const list = skuInfo.value.list;
  for (let i in list) {
    //改成键值对的方式
    skuInfo2.value[list[i].difference] = list[i];
  }
};

// 选择sku
const chooseSku = ref([]); //sku name
const subIndex = ref([]); //sku idx
const selecSkuInfo = ref({}); //sku idx
const choose = (item, n, index) => {
  chooseSku.value[n] = item;
  subIndex.value[n] = index;
  selecSkuInfo.value = skuInfo2.value[chooseSku.value];
};
const onAddSkuGoods = () => {
  if (selecSkuInfo.value?.id) {
    skuInfo.value.skuName = chooseSku.value.join(" ");
    skuInfo.value.num += 1;
    closePop();
  } else {
    uni.showToast({
      title: "请选择完整的规格",
      icon: "none",
    });
  }
};

// 打开购物车
const popupCartRef = ref();
const openCart = () => {
  popupCartRef.value.open();
};

// 跳转
const goUrl = (url) => {
  uni.navigateTo({
    url,
  });
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

// 店铺标题
.shopTitle {
  padding: 20rpx 28rpx;
  margin: 0 20rpx;
  margin-top: -100rpx;
  z-index: 10;

  .tableNum {
    height: 44rpx;
  }
}

// scroll
.item {
  padding: 10rpx;

  &-title {
    .text {
      line-height: 30rpx;
    }
  }

  &-content {
    .text {
      line-height: 30rpx;
      /* #ifndef APP-NVUE */
      word-break: break-all;
      /* #endif */
    }
  }
}

// 步进器
.minus {
  width: 44rpx;
  height: 44rpx;
  border-width: 1px;
  border-color: #e6e6e6;
  border-style: solid;
  border-radius: 50%;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 6rpx;
}

.plus {
  width: 44rpx;
  height: 44rpx;
  background-color: #75301e;
  border-radius: 50%;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}

// 底部
.bottom {
  width: 90%;
  height: 100rpx;
  position: fixed;
  bottom: 50rpx;
  left: 40rpx;
  border-radius: 20rpx;
  z-index: 999999;

  .imageBotm {
    position: absolute;
    top: -20rpx;
    left: 0;
  }

  .anOrder {
    height: 100rpx;
    padding: 0 50rpx;
    margin-left: 200rpx;
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
  }
}

// 购物车弹窗
.popBox {
  display: flex;
  flex-direction: column;
  height: 800rpx;
  overflow: hidden;
  padding: 24rpx 32rpx;

  .scrollView {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
}

.active {
  background-color: #c3a69e;
  color: #75301e;
  border: 1rpx solid #75301e;
}
</style>
